<template>
  <div>
    <apexchart type="line" height="750" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
import ApexCharts from "apexcharts";
import VueApexCharts from "vue-apexcharts";
import moment from "moment";
export default {
  name: "ChartPage",

  components: {
    apexchart: VueApexCharts
  },

  props: {
    history: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },

  data: () => ({
    series: [], // 各元素的数据
    historyData: [],
    chartOptions: {
      colors: ["#D81B60", "#90A4AE", "#FFD562", "#98D87D"],
      chart: {
        id: "historyChart",
        height: 770,
        stacked: false, // 堆叠
        animations: {
          enabled: false,
          speed: 900,
          animateGradually: {
            enabled: true,
            delay: 150
          },
          dynamicAnimation: {
            enabled: true,
            speed: 850
          }
        }
        // dropShadow: {
        //   enabled: false
        // }
      },
      legend: {
        show: true,
        showForSingleSeries: true,
        horizontalAlign: "center",
        showForNullSeries: false,
        showForZeroSeries: false
      },
      // labels: [],
      dataLabels: {
        enabled: true,
        enabledOnSeries: [] //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      },
      noData: {
        text: "这个时间段暂无历史数据",
        align: "center",
        verticalAlign: "middle",
        style: {
          color: "#666666",
          fontSize: "14px",
          fontFamily: "Helvetica, Arial, sans-serif"
        }
      },
      markers: {
        size: 0 //[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] //[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4]
      },
      stroke: {
        curve: "straight",
        width: 2, // [5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], //[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4],
        show: true
      },
      // title: {
      //   text: "折线图 11因素",
      //   align: "left"
      // },
      grid: {},
      tooltip: {
        enabled: true,
        shared: true,
        intersect: false,
        followCursor: true,
        x: {
          show: true,
          formatter: function(value) {
            return moment(value).format("YYYY年MM月DD日 HH:mm");
          }
        }
      },
      xaxis: {
        title: {
          text: "月份",
          offsetX: 690
        },
        type: "datetime",
        categories: [],
        labels: {
          datetimeFormatter: {
            year: "yyyy",
            month: "yy年MM",
            day: "M月/dd日",
            hour: "M月dd日 HH:mm:ss"
          }
        }
      },
      yaxis: {
        show: true,
        decimalsInFloat: 2,
        axisBorder: {
          show: true,
          color: "#78909C",
          offsetX: 0,
          offsetY: 0
        },
        tickAmount: 10,
        tooltip: {
          enabled: true,
          offsetX: 0
        }
      },
      annotations: {
        yaxis: [
          {
            y: null,
            yAxisIndex: 0,
            borderColor: "",
            label: {
              borderColor: "#71AF65",
              style: {
                color: "#fff",
                // fontSize: "12px",
                background: "#71AF65"
              },
              text: ""
            }
          }
        ]
      },
      // 响应
      responsive: [
        {
          breakpoint: 600,
          options: {
            chart: {
              height: 900
            },
            legend: {
              show: true,
              showForSingleSeries: true,
              horizontalAlign: "center",
              showForNullSeries: true,
              showForZeroSeries: true,
              fontSize: "18px",
              markers: {
                width: 18,
                height: 18,
                radius: 18,
                strokeColor: "#666666"
              },
              itemMargin: {
                horizontal: 8,
                vertical: 18
              }
            }
          }
        },
        {
          breakpoint: 1800,
          options: {
            chart: {
              height: 760
            },
            legend: {
              show: true,
              showForSingleSeries: true,
              horizontalAlign: "center",
              showForNullSeries: true,
              showForZeroSeries: true,
              fontSize: "15px",
              markers: {
                width: 12,
                height: 12,
                radius: 12,
                strokeColor: "#666666"
              },
              itemMargin: {
                horizontal: 20,
                vertical: 15
              }
            }
          }
        }
      ]
    }
  }),

  created() {
    // console.log("-------: ", this.history);
  },

  updated() {
    // if (this.series.length > 0) {
    //   this.$nextTick(() => {
    //     ApexCharts.exec("historyChart", "toggleSeries", "电池电量");
    //     ApexCharts.exec("historyChart", "toggleSeries", "记步数");
    //     ApexCharts.exec("historyChart", "toggleSeries", "环境温度(℃)");
    //     ApexCharts.exec("historyChart", "toggleSeries", "目标温度(℃)");
    //   });
    // }
  },

  watch: {
    history(val, oldVal) {
      if (
        JSON.stringify(val) !== JSON.stringify(oldVal) &&
        this.history.length > 0
      ) {
        this.createSeries();
        // this.$store.commit("hideLoading");
      }
      if (
        JSON.stringify(val) !== JSON.stringify(oldVal) &&
        this.history.length === 0
      ) {
        this.series = [];
      }
    }
  },

  methods: {
    createSeries() {
      let seriseData = [
        {
          name: "电池电量",
          type: "line",
          data: []
        },
        {
          name: "记步数", // vol
          type: "line",
          data: []
        },
        {
          name: "环境温度(℃)", // temp
          type: "line",
          data: []
        },
        {
          name: "目标温度(℃)", // humi
          type: "line",
          data: []
        }
      ];
      for (let index = 0; index < this.history.length; index++) {
        let item = this.history[index];
        // let stepNum = isNaN(item.stepNum.toString())
        //   ? 0
        //   : Number(item.stepNum.toString());
        // let environmentTem = item.environmentTem >= 0 ? item.environmentTem : 0;
        // let targetTem = item.targetTem >= 0 ? item.targetTem : 0;

        //  envTemp: data.data.envTemp[i],
        //         stepCount: data.data.stepCount[i],
        //         t: data.data.t[i],
        //         targetTemp: data.data.targetTemp[i],
        //         vol: data.data.vol[i]

        seriseData[0].data.push([item.t, item.vol]); // 电池电量
        seriseData[1].data.push([item.t, item.stepCount]); // 记步数
        seriseData[2].data.push([item.t, item.envTemp]); // 环境温度(℃)
        seriseData[3].data.push([item.t, item.targetTemp]); // 目标温度(℃)
      }

      this.series = seriseData;
    }
  }
};
</script>

<style>
</style>
